"use client"
import { Button } from "@heroui/button";
import { Form } from "@heroui/form";
import { Input, Textarea } from "@heroui/input";
import { Link } from "@heroui/link";
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@heroui/modal";
import { Radio, RadioGroup } from "@heroui/radio";
import { useRef, useState } from "react";
import { MyResponse, QueryIProps, request } from "@/lib/request";

interface IProps {
    children?: React.ReactNode;
}

export function Feedback({ children }: IProps) {
    const { isOpen, onOpen, onOpenChange } = useDisclosure();
    const [action, setAction] = useState<any>(null);
    const onCloseRef = useRef<(() => void) | null>(null);
    const defaultContent = (
        <>
            求剧<span className="font-bold">&</span>反馈
        </>
    );

    return (
        <>
            <div className="text-[#f31260] underline cursor-pointer inline" onClick={onOpen}>
                {children || defaultContent}
            </div>
            <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
                <Form
                    className="w-full max-w-xs flex flex-col gap-4"
                    validationBehavior="native"
                    onReset={() => setAction("reset")}
                    onSubmit={async (e) => {
                        e.preventDefault();
                        let data = Object.fromEntries(new FormData(e.currentTarget));
                        // setAction(`submit ${JSON.stringify(data)}`);
                        const feedResult = await request<MyResponse>("/feedback", "POST", {
                            title: data.title,
                            content: data.content,
                            contact: data.contact
                        })
                        if (feedResult?.code === 200) {
                            onCloseRef.current?.();
                        }
                    }}
                >
                    <ModalContent>
                        {(onClose) => {
                            onCloseRef.current = onClose; // 将 onClose 存储到 ref 中
                            return (
                                <>
                                    <ModalHeader className="flex flex-col gap-1">求短剧&反馈表单</ModalHeader>
                                    <ModalBody>
                                        <div className="flex flex-col gap-4">
                                            {/* 举报类型 */}
                                            <RadioGroup
                                                isRequired
                                                label="举报类型"
                                                errorMessage="请选择"
                                                orientation="horizontal"
                                                name="title"
                                            >
                                                <Radio value="求短剧">求短剧</Radio>
                                                <Radio value="反馈">反馈</Radio>
                                            </RadioGroup>
                                            <Textarea
                                                isRequired
                                                label="详细描述【请在下框输入反馈内容】"
                                                errorMessage="请在框里输入反馈内容"
                                                labelPlacement="outside"
                                                name="content"
                                                placeholder="求短剧请填写你需要的短剧名字，小编会第一时间帮您查找收录，其他反馈请简单说明情况！"
                                            />
                                            <Input
                                                isRequired
                                                errorMessage="请输入联系信息"
                                                label="联系方式"
                                                labelPlacement="outside"
                                                name="contact"
                                                placeholder="请输入联系信息(邮箱/手机号/QQ号)"
                                                type="text"
                                            />
                                        </div>
                                    </ModalBody>
                                    <ModalFooter>
                                        <Button color="danger" variant="light" type="reset" onClick={onClose}>
                                            取消
                                        </Button>
                                        <Button color="primary" type="submit">
                                            提交
                                        </Button>
                                    </ModalFooter>
                                </>
                            );
                        }}
                    </ModalContent>
                </Form>
            </Modal>
        </>
    )
}